<template>
  <div class="sidebar">

    <el-menu :default-active="onRoutes" menu-trigger="click" class="el-menu-vertical-demo" mode="vertical" theme="dark" unique-opened router :collapse="isCollapse" @select="menuSelected">
      <template v-for="m1 in menuArray" >
        <el-submenu :index="m1.urlPath" :class="topMenu != m1.icon ? '' : 'siderbar-active'">
          <template slot="title"  class="left_menu">
            <i ><img :src="require('@/assets/'+m1.icon+'.png')" alt="">{{ m1.name}}</i>
            <!-- <i>{{ item.name}}</i> -->
          </template>
          <template v-for="m2 in m1.subMenu">
            <el-submenu v-if='m2.subMenu && m2.subMenu.length != 0' :key="m2.id" :index="m2.urlPath">
              <template slot="title">
                {{ m2.name}}
              </template>
              <el-menu-item v-for="m3 in m2.subMenu" :key="m3.id" :index="m3.urlPath">{{ m3.name }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else  :key="m2.id" :index="m2.urlPath">{{ m2.name }}
            </el-menu-item>
          </template>

        </el-submenu>
      </template>
    </el-menu>

  </div>

</template>

<script>
  // import * as userRoleService from '@/services/UserRoleService'
  export default {
    data() {
      return {
        isCollapse: true,
        topMenu: "0",
        menuArray: []
      }
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    mounted() {
      let menus = [
          {
              "id": 414757,
              "createTime": "2019-08-05T18:03:00Z",
              "updateTime": "2019-08-06T06:25:29.382Z",
              "name": "计划",
              "urlPath": "plan",
              "type": 1,
              "icon": "plan",
              "orderx": 13,
              "parentId": 0
          },
          {
              "id": 415309,
              "createTime": "2019-08-05T18:54:00Z",
              "updateTime": "2019-08-06T06:54:39.748Z",
              "name": "作业计划申请查询",
              "urlPath": "/plan-search",
              "type": 1,
              "icon": null,
              "orderx": 3,
              "parentId": 414757
          },
          // {
          //     "id": 415307,
          //     "createTime": "2019-08-06T06:51:48.378Z",
          //     "updateTime": "2019-08-06T06:51:48.378Z",
          //     "name": "作业计划申请录入",
          //     "urlPath": "/plan-create",
          //     "type": 1,
          //     "icon": null,
          //     "orderx": 1,
          //     "parentId": 414757
          // },
      ]
      // let ret = await userRoleService.getUserRole(this.$profile.userRoleId)
      this.makeMenuItems(menus)

      this.$root.eventHub.$on("soll", (res) => {
        this.isCollapse = res
      })
    },
    methods: {
      makeMenuItems(menuData) {
        let menuArray = menuData.filter(m => m.parentId === 0 && m.type === 1).sort((a, b) => a.orderx > b.orderx)
        menuArray.forEach(m1 => {
          m1.subMenu = menuData.filter(m2 => m2.parentId === m1.id && m2.type === 1).sort((a, b) => a.orderx > b.orderx)
          m1.subMenu.forEach(m2 => {
            m2.subMenu = menuData.filter(m3 => m3.parentId === m2.id && m3.type === 1).sort((a, b) => a.orderx > b.orderx)
          })
        })

        this.menuArray = menuArray
        let permissions = menuData.filter(m => m.type === 2)
        sessionStorage.setItem('permissions', JSON.stringify(permissions));
      },
      menuSelected(index) {
        this.topMenu = index.slice(7, index.lastIndexOf('/'))
        if (this.topMenu === '') {
          this.topMenu = index.slice(index.lastIndexOf('/') + 1)
        }
        this.$root.eventHub.$emit("dialog")
        this.$root.eventHub.$emit("show", false)
      }
    }
  }

</script>

<style scoped>
  .sidebar {
    display: block;
    position: relative;
    z-index: 1000;
  }

  .sidebar>ul {
    height: 100%;
    background: transparent;
  }
  .left_menu{
    width:100px;
  }
  .sidebar img {
    box-sizing: content-box;
    display: block;
    padding: 14px 0 14px 2px;
    margin: 0 auto;
    width: 20px;
    height: 20px;
  }

  .sidebar li div:hover,
  .sidebar li:hover {
    color: white !important;
    cursor: pointer;
    background-color: rgba(0, 98, 205, 0.7) !important;
  }

  .sidebar li ul {
    background: white !important;
    z-index: 10000 !important;
  }

  .sidebar .el-submenu__title i,
  .sidebar .el-tooltip i {
    font-family: 'Microsoft YaHei';
    font-size: 16px;
    color: white;
    font-style: normal;
  }

  @media (max-width: 767px) {
    .sidebar {
      position: absolute;
      top: 60px;
      bottom: 0;
      width: 75px;
      overflow-x: hidden;
      overflow-y: auto;
      visibility: visible;
      background: rgb(41, 139, 245);
      -webkit-overflow-scrolling: touch;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    min-height: 400px;
  }
  .el-menu-vertical-demo{
    border: none!important;
  }


</style>
